<template>
	<view class="main">
		<nav-bar color="#000000" bbtn>  商品详情</nav-bar>
		<view class="shop-img">
			<swiper class="screen-swiper" :class="dotStyle ? 'square-dot' : 'round-dot'" :indicator-dots="true" :circular="true" :autoplay="true" interval="5000" duration="500">
				<swiper-item v-for="(item, index) in goodsDetails.carousel_img" :key="index">
					<image :src="item"></image>
					<!-- <video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover" v-if="item.type=='video'"></video> -->
				</swiper-item>
			</swiper>
		</view>
		<view class="shop-info">
			<view class="shop-info-price">
				<text class="price">{{ goodsDetails.price }}元/{{ goodsDetails.unit }}</text>
				<text class="origin-price">{{ goodsDetails.market_price }}元/{{ goodsDetails.unit }}</text>
				<text class="returnCommission">返佣</text>
				<text class="returnCommission-price">￥{{ goodsDetails.direct_return }}</text>
				<text class="stock">已售{{ goodsDetails.volume }}丨库存{{ goodsDetails.stock }}</text>
			</view>
			<view class="shop-info-title">{{ goodsDetails.title }}</view>
			<view class="shop-info-text">{{ goodsDetails.describe }}</view>
			<view class="specification">规格选择</view>
			<view class="specification-wrapper">
				<text
					class="specification-item "
					:class="{ active: item.id == goodsDetails.specs_id }"
					v-for="(item, index) in specs"
					@click="changeTaocan(goodsDetails.id, item.id)"
				>
					{{ item.specs }}
				</text>
			</view>
			<view class="remarks"><rich-text :nodes="goodsDetails.remark"></rich-text></view>
		</view>
		<!-- 卡券地址信息 -->
		<view class="section-2" v-if="goodsDetails.type == 1">
			<view class="img"><image src="../../static/image/order/icon_dzz@3x.png" mode=""></image></view>
			<view class="address">
				<text>{{ goodsDetails.store_province }}{{ goodsDetails.store_city }}{{ goodsDetails.store_area }}{{ goodsDetails.store_detail }}</text>
			</view>
			<view class="mobile" @click="callPhone(goodsDetails.store_phone)"><image src="../../static/image/order/icon_diha@3x.png" mode=""></image></view>
		</view>
		<!-- 物流地址信息 -->
		<view class="logistics" v-if="goodsDetails.type == 2" @click="noCity">
			物流：配送地址不支持城市
			<image src="../../static/image/follow/lALPGoU8blkV3q8bGw_27_27.png" mode=""></image>
		</view>
		<view class="explain">
			<view class="explain-title">套餐说明</view>
			<view class="explain-item">1.抢购日期：{{ goodsDetails.buy_starttime }}~{{ goodsDetails.use_endtime }}</view>
			<view class="explain-item" v-if="goodsDetails.type == 1">2.使用日期：{{ goodsDetails.use_starttime }}~{{ goodsDetails.buy_starttime }}</view>
			<view class="explain-item" v-if="goodsDetails.type == 2">2.发货日期：{{ goodsDetails.use_starttime }}~{{ goodsDetails.use_endtime }}</view>
			<view class="explain-item">
				3.套餐内容：
				<rich-text :nodes="goodsDetails.content"></rich-text>
			</view>
			<view class="explain-item">4.温馨提示：{{ goodsDetails.cozy }}</view>
		</view>
		<view class="shop-detail">
			<view class="shop-detail-title">商品详情</view>
			<image :src="goodsDetails.detail_img" mode=""></image>
		</view>
		<view class="special-statement">
			<view class="special-statement-title">套餐说明</view>
			<view class="special-statement-item">1、图片仅供参考，请以实际为准</view>
			<view class="special-statement-item">2、本次活动可转赠亲友，但不可二次销售，违者必将追究其法律责任，并冻结或作废相关电子码</view>
			<view class="special-statement-item">3、购买此套餐视为认同此声明及活动规则</view>
		</view>
		<view class="btn-wrapper">
			<view class="btn btn1">
				<image src="../../static/image/order/icon_shue@3x.png"></image>
				首页
			</view>
			<view class="btn btn2" @click="goToPay(goodsDetails.id, goodsDetails.specs_id)">立即抢购</view>
		</view>
		<!-- 无配送地址 -->
		<view class="section-3" v-show="cityShow">
			<view class="motal">
				<view class="title">
					<text>配送不支持地址</text>
					<view class="img" @click="colseCity"><image src="../../static/image/order/error@3x.png" mode=""></image></view>
				</view>
				<view class="city" v-for="(item,index) in provice" :key="index">
					<view class="province">{{item}}</view>
					<view class="municipal">
						<text v-for="(items,indexs) in city[String(item)]">{{items}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import shopList from '@/components/shopLst.vue';
export default {
	components: {
		shopList
	},
	data() {
		return {
			goodsDetails: '',
			listStyle: 2,
			specs: '', //规格选择
			stock: '', //总库存
			cardCur: 0,
			dotStyle: false,
			towerStart: 0,
			direction: '',
			cityShow:'',//无配送地址显示隐藏
			provice:'',
			city:''
		};
	},
	onLoad(option) {
		this.changeTaocan(option.goods_id, option.bid);
	},
	methods: {
		//打电话
		callPhone: function(e) {
			uni.showModal({
				title: '提示',
				content: '请拨打' + e + '联系客服',
				success: res => {
					if (res.confirm) {
						uni.makePhoneCall({
							phoneNumber: String(e)
						});
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		},
		//点击更换套餐
		changeTaocan: function(goods_id, bid) {
			this.ajaxJson('goodsDetail', { goods_id: goods_id, specs_id: bid }, res => {
				if (res.stock > 0) {
					console.log(res);
					this.goodsDetails = res.goodsDetails;
					this.specs = res.specs;	
					this.city = JSON.parse(res.goodsDetails.delivery_address)
					this.provice=(function(){
						let obj = JSON.parse(res.goodsDetails.delivery_address);
						let arr=[]
						for(let key in obj){
							arr.push(key)
						}
						return arr
					}())
					console.log(this.provice)
				} else {
					uni.showToast({
						title: '抱歉，该商品已售罄',
						success: () => {
							uni.navigateTo({
								url: '../search/search'
							});
						}
					});
				}
			});
		},
		//++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++轮播
		DotStyle(e) {
			this.dotStyle = e.detail.value;
		},
		// cardSwiper
		cardSwiper(e) {
			this.cardCur = e.detail.current;
		},
		// towerSwiper
		// 初始化towerSwiper
		TowerSwiper(name) {
			let list = this[name];
			for (let i = 0; i < list.length; i++) {
				list[i].zIndex = parseInt(list.length / 2) + 1 - Math.abs(i - parseInt(list.length / 2));
				list[i].mLeft = i - parseInt(list.length / 2);
			}
			this.swiperList = list;
		},

		// towerSwiper触摸开始
		TowerStart(e) {
			this.towerStart = e.touches[0].pageX;
		},

		// towerSwiper计算方向
		TowerMove(e) {
			this.direction = e.touches[0].pageX - this.towerStart > 0 ? 'right' : 'left';
		},

		// towerSwiper计算滚动
		TowerEnd(e) {
			let direction = this.direction;
			let list = this.swiperList;
			if (direction == 'right') {
				let mLeft = list[0].mLeft;
				let zIndex = list[0].zIndex;
				for (let i = 1; i < this.swiperList.length; i++) {
					this.swiperList[i - 1].mLeft = this.swiperList[i].mLeft;
					this.swiperList[i - 1].zIndex = this.swiperList[i].zIndex;
				}
				this.swiperList[list.length - 1].mLeft = mLeft;
				this.swiperList[list.length - 1].zIndex = zIndex;
			} else {
				let mLeft = list[list.length - 1].mLeft;
				let zIndex = list[list.length - 1].zIndex;
				for (let i = this.swiperList.length - 1; i > 0; i--) {
					this.swiperList[i].mLeft = this.swiperList[i - 1].mLeft;
					this.swiperList[i].zIndex = this.swiperList[i - 1].zIndex;
				}
				this.swiperList[0].mLeft = mLeft;
				this.swiperList[0].zIndex = zIndex;
			}
			this.direction = '';
			this.swiperList = this.swiperList;
		},
		//立即抢购
		goToPay: function(goods_id, specs_id) {
			uni.navigateTo({
				url: '../order/orderPay?goods_id=' + goods_id + '&specs_id=' + specs_id
			});
		},
		//暂不配送地址
		noCity:function(){
			this.cityShow =true
		},
		//关闭无配送地址弹窗
		colseCity:function(){
			this.cityShow =false
			}
	}
};
</script>

<style scoped lang="scss">
@import '../../colorui/main.css';
* {
	margin: 0;
	padding: 0;
	list-style: none;
	box-sizing: border-box;
	font-size: 0.75rem;
}
.main {
	background-color: #f4f4fa;
	padding-bottom: 2rem;
}
.shop-img {
	height: 12rem;
}
.shop-img image {
	width: 100%;
	height: 100%;
}
.shop-info {
	background: #ffffff;
	border-radius: 30px 30px 10px 10px;
	position: relative;
	top: -60px;
	margin-bottom: -45px;
	padding: 0.75rem 4%;
}
.price {
	color: #fd6431;
	font-weight: bold;
	font-size: 0.85rem;
	margin-right: 0.25rem;
}
.origin-price {
	color: #aaa;
	text-decoration: line-through;
	font-size: 12px;
}
.returnCommission {
	display: inline-block;
	border: 1px solid #fd6431;
	margin-left: 0.5rem;
	padding: 0.1rem 0.2rem;
	border-radius: 5px 0 0 5px;
	color: #fff;
	background-color: #fd6431;
	position: relative;
	top: -0.1rem;
	font-size: 0.65rem;
}
.returnCommission-price {
	display: inline-block;
	border: 1px solid #fd6431;
	padding: 0.1rem 0.2rem;
	color: #fd6431;
	border-radius: 0 5px 5px 0;
	position: relative;
	top: -0.1rem;
	font-size: 0.65rem;
}
.stock {
	color: #aaa;
	font-size: 12px;
	float: right;
	position: relative;
	top: 0.1em;
}
.shop-info-price text {
	line-height: 1rem;
}
.shop-info-title {
	font-size: 0.9rem;
	font-weight: bold;
	margin-top: 0.5rem;
}
.shop-info-text {
	margin-top: 0.5rem;
	color: #1d1e21;
}
.specification {
	font-size: 0.8rem;
	margin-top: 0.5rem;
	font-weight: bold;
	color: #4e5366;
}
.specification-wrapper {
	margin-top: 1rem;
}
.specification-item {
	color: #4e5366;
	background-color: #f4f4fa;
	margin-right: 0.5rem;
	padding: 0.25rem 1rem;
	border-radius: 50px;
}
.active {
	color: #fd6431;
	background-color: #ffe8df;
}
.remarks {
	color: #ff936d;
	margin-top: 1rem;
	border-top: 1px dashed #eee;
	padding-top: 0.5rem;
}
.logistics {
	background-color: #ffffff;
	padding: 1rem 4%;
	border-radius: 10px;
	position: relative;
	color: #1d1e21;
	margin-top: -15px;
}
.logistics image {
	width: 0.5rem;
	height: 1rem;
	position: absolute;
	transform: translate(0, -50%);
	top: 50%;
	right: 4%;
}
.explain {
	background-color: #ffffff;
	padding: 0.5rem 4%;
	border-radius: 10px;
	color: #1d1e21;
	margin-top: 15px;
}
.explain-title,
.special-statement-title {
	color: #4e5366;
	font-weight: bold;
	font-size: 0.8rem;
	line-height: 1.6rem;
}
.explain-item,
.special-statement-item {
	line-height: 1.4rem;
	color: #aaa;
}
.shop-detail {
	background-color: #ffffff;
	padding: 0.5rem 0;
	border-radius: 10px;
	color: #1d1e21;
	margin-top: 15px;
}
.shop-detail-title {
	color: #4e5366;
	font-weight: bold;
	font-size: 0.8rem;
	line-height: 1.6rem;
	margin: 0 4% 0.5rem;
}
.shop-detail image {
	width: 100%;
}
.special-statement {
	background-color: #ffffff;
	padding: 0.5rem 4%;
	border-radius: 10px;
	color: #1d1e21;
	margin-top: 15px;
}
.special-statement-item {
	font-size: 13px;
}
.btn-wrapper {
	margin-top: 1rem;
}
.btn {
	display: inline-block;
	width: 40%;
	text-align: center;
	padding: 0.7rem 0;
	font-size: 0.85rem;
	color: #ffffff;
}
.btn1 {
	background: -webkit-linear-gradient(left, #ff936d, #fea789);
	background: -moz-linear-gradient(left, #ff936d, #fea789);
	margin-left: 10%;
	border-radius: 100px 0 0 100px;
}
.btn2 {
	background: -webkit-linear-gradient(left, #fd6431, #ff9972);
	border-radius: 0 100px 100px 0;
}
.btn image {
	width: 0.85rem;
	height: 0.85rem;
	margin-right: 0.2rem;
	position: relative;
	top: 0.15rem;
}
/* 物流地址 */
.section-2 {
	width: 100%;
	margin: 0 auto;
	padding: 40rpx;
	background-color: #ffffff;
	border-radius: 20rpx;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	.img {
		width: 50rpx;
		height: 50rpx;
		margin-right: 40rpx;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.address {
		width: 70%;
	}
	.mobile {
		width: 50rpx;
		height: 50rpx;
		image {
			width: 100%;
			height: 100%;
		}
		margin-left: auto;
	}
}
//不支持地址
.section-3 {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background-color: rgba(0, 0, 0, 0.5);
	.motal {
		display: flex;
		flex-direction: column;
		width: 90%;
		margin: 200rpx auto;
		padding: 40rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
			.title{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.img{
					width: 40rpx;
					height: 40rpx;
						image{width: 100%;height: 100%;}
				}
			}
			
		.city {
			margin-top: 20rpx;
			text{
				margin-right: 10rpx;
				color: #AAAAAA;
			}
			
		}
	}
}
</style>
